<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>图片上传</title>
<base href='<?php echo base_url()?>'>
<link rel="stylesheet" type="text/css" href="public/common/css/common.css"/>
<link rel="stylesheet" type="text/css" href="public/admin/css/admin.css"/>
<script src="public/common/js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#up_q_list').find('li').click(function(){
		$index=$('#up_q_list').find('li').index(this);
		$(this).addClass('on').siblings().removeClass('on');
		$('.up_contain').find('.xc_contain').eq($index).show().siblings().hide();
	});

$('#add_num').click(function(){
	i = $('#pic_contain .pic').length+1;
	if(i < 5)
	{
		str='<div class="pic"><p><input type="file" name="image'+i+'" />&nbsp;图片说明(alt)：<input type="text" style="width:100px;" name="image_alt'+i+'" /></p></div>';
		$(str).appendTo('#pic_contain');
	}else{
		alert('最多允许同时上传4张图片！');
	}
});

//单图
$('#sl').click(function(){
$num=$('.pic_list_ct').find('#pic_sl').size();
var $pic_val='';
for(i=0;i<$num;i++){
	$pic_sl=$('.pic_list_ct').find('#pic_sl').eq(i);
	$alt=$('.pic_list_ct').find('#alt').eq(i);
	if($pic_sl.attr('checked')){
		$pic_val=$pic_sl.val();
		//缩略图
		$pic_thumb=$pic_sl.parent().find('#pic_thumb').val();
		$pic_alt=$alt.val();
	}
}
$cl_thumb=$('#is_pic_thumb').attr('checked');//勾选缩略图
if($cl_thumb){
	if($pic_thumb){
		$pic_val=$pic_thumb;
	}else{
		alert('选择图片没有缩略图');
		return;
	}
}

<?php if($CKEditorFuncNum):?>
	if($pic_val==''){
		alert('还没有选择图片！');
		return;
	}
	back_img= '<?php echo base_url()?>'+$pic_val;
	window.top.opener.CKEDITOR.tools.callFunction('<?php echo $CKEditorFuncNum?>', back_img)
	window.close();
<?php else:?>
	if($pic_val!='')
	{
		if('<?php echo $type?>' == 'product_image')
		{
			html='<td><input type="hidden" name="product_attribute[product_image][]" value="'+$pic_val+'"/><img src="'+$pic_val+'" width="100px" height="100px"> <a href="javascript:void(0)" onclick="delete_product_image(this)">删除</a></td>';
			if($(window.parent.document).find('.product_image table tr td').length > 0)
			{
				$(window.parent.document).find('.product_image table tr td').last().after(html);
			}else{
				$(window.parent.document).find('.product_image table tr').html(html);
			}	
		}else{
			$get='#pic_path';
			$show_str='<a target="_blank" href="'+$pic_val+'" ><img src="'+$pic_val+'"  height="120" width="120"/></a>';
			$(window.parent.document).find($get).val($pic_val).focus();
			$(window.parent.document).find('#show_pic_path').html($show_str);
		}	
	}
<?php endif;?>
});

//多图
$('#sl_ck').click(function(){
	$num=$('.pic_list_ct').find('#pic_sl').size();
	var $pic_rel='';
	var $show_pic='';
for(i=0;i<$num;i++){
	$pic_sl=$('.pic_list_ct').find('#pic_sl').eq(i);
	if($pic_sl.attr('checked')){
		$pic_rel=$pic_sl.attr('rel');
		$pic_val=$pic_sl.val();
		//取得alt
		$pic_alt=$pic_sl.next('#alt').val();
		$show_pic=$show_pic+'<li id="pic_'+$pic_rel+'"><a href="../upload/'+$pic_val+'" target="_blank"><img src="../upload/'+$pic_val+'" border="0" height="120" width="120"/></a><p><input type="text" style="width:100px;" name="alt" id="alt" value="'+$pic_alt+'"/><img src="template/images/c_alt.gif" style="border:0;cursor:point;" onclick="change_alt(this,\''+$pic_rel+'\')" border="0"/></p><input type="hidden" name="fields[pic_path][]" value="'+$pic_rel+'"/><span onclick="del_pic(\''+$pic_rel+'\',this);">删除</span></li>';
	}
}
$get='#pic_path';
$(self.parent.document).find($get).val($show_pic);
$(self.parent.document).find('.form').find('ul#show_picpic_path').append($show_pic);
$(self.parent.document).find('#title').focus();
});

$('.pic_nav li a').first().addClass('hover');
$('.pic_nav li a').click(function(){
	$('.pic_nav li a').removeClass('hover');
	$(this).addClass('hover');
});
$('.pic_nav li a').first().click();
});

function check_is_thumb(n)
{
	$p=$(n).parent('p');
	if($(n).attr('checked')){
		$p.find('#is_thumb').val('1');
	}else{
		$p.find('#is_thumb').val('0');
	}
}

function delete_upload(obj)
{
	if($('#pic_contain .pic').length > 1)
	{
		$('#pic_contain .pic').last().remove();
	}else{
		alert('至少上传一张图片！');
	}
}
function get_image(category_id)
{
	$.post('<?php echo site_url("admin/image/get_image")?>',{category_id:category_id},function(result){
		if(result == 0)
		{	
			$('.pic_list_ct').html('');
		}else{
			result_obj = eval('('+result+')');
			html='';
			obj_length = result_obj.length;
			for(var i=0;i<obj_length;i++)
			{
				if(result_obj[i].image_thumb_path == '')
				{
					img_path=result_obj[i].image_path;
				}else{
					img_path=result_obj[i].image_thumb_path;
				}
				html+='<li><img src="'+img_path+'" width="80" height="80"> <label><input type=radio style="display:none" rel="14" id="pic_sl" value="'+result_obj[i].image_path+'" name="pic_sl"><input type="hidden" name="alt" id="alt" value="'+result_obj[i].image_alt+'"><input type="hidden" id="pic_val" value="'+result_obj[i].image_path+'"><input type="hidden" id="pic_thumb" name="pic_thumb" value="'+result_obj[i].image_thumb_path+'"> <div class="pic_cz" style="display: none; "><a title="查看" class="xg_link" href="#"></a></div><em style="display:none"></em></li></label></li>';
			}
			$('.pic_list_ct').html(html);
				$('.pic_list_ct').find('li').hover(function(){
					$(this).find('.pic_cz').show();
					$(this).addClass('on');
				},function(){
					$(this).find('.pic_cz').hide();
					if(!$(this).find('#pic_sl').attr('checked')){
					$(this).removeClass('on');
					}
			});
			$('.pic_list_ct').find('li').click(function(){
				$('.pic_list_ct').find('#pic_sl').attr('checked','');
				$('.pic_list_ct').find('em').hide();
				$('.pic_list_ct').find('li').removeClass('on');
				$(this).find('#pic_sl').attr('checked','checked');
				$(this).find('em').show();
				$(this).addClass('on');
			});
		}
	});			
		
}
</script>

<style type="text/css">
body{background:#fff; margin:5px;}
.pic{margin-top:3px; border:1px solid #ccc; padding:8px; background:#FFFFFF}
.pic p{line-height:25px; line-height:25px;}
.pic_list_ct{margin:10px 0;}
.pic_list_ct li{width:80px; padding:1px; border:2px solid #ddd; position:relative; height:80px; display:block; float:left; margin-bottom:10px; margin-right:10px; display:inline; cursor:pointer}
.pic_list_ct li.on{border:2px solid #ff8215;}
.pic_list_ct li .pic_cz{height:15px; background:#fff; width:100%;position:absolute; left:0; top:0; z-index:100; padding-top:5px;filter:alpha(opacity=80);-moz-opacity:0.8;-khtml-opacity: 0.8; opacity: 0.8;}
.pic_list_ct li a{width:10px; height:10px; display:block; float:left; margin-left:5px; display:inline;background:url(public/admin/images/c_alt.gif) no-repeat left top; }
.pic_list_ct li em{display:block; width:9px; height:9px; background:url(public/admin/images/input_ok.gif) no-repeat right bottom; position:absolute; right:1px; bottom:1px;}
.pic_list li_ct label{display:block; height:20px; line-height:20px;}
.sl_pic{margin-top:10px; height:25px; background:#FFFFFF; border:1px solid #ccc; padding:5px;}
.sl_pic span{padding-left:8px; color:#0000FF}
.up_qh {
height: 31px;
border-bottom: 1px solid #DDD;
margin-bottom: 10px;
}
.up_qh span {
display: block;
float: left;
width: 150px;
margin-left: 20px;
display: inline;
height: 31px;
line-height: 31px;
}
.up_qh ul {
height: 31px;
float: left;
}
.up_qh li.on {
background: url(public/admin/images/q_qh.gif) no-repeat left top;
position: relative;
top: 1px;
color: #1566B3;
font-weight: bold;
}
.up_qh li {
display: block;
height: 31px;
line-height: 31px;
background: url(public/admin/images/q_bg.gif) repeat-x left top;
text-align: center;
color: white;
width: 76px;
margin-right: 10px;
float: left;
display: inline;
cursor: pointer;
}
input, textarea, select {
font-size: 12px;
padding: 1px;
}
.xc_contain .pic_nav {
margin: 5px 0;
}
.xc_contain .pic_nav li {
display: block;
float: left;
margin-right: 10px;
display: inline;
}
.xc_contain .pic_nav li a:hover, .xc_contain .pic_nav li a.hover {
background: #F60;
color: white;
}
.xc_contain .pic_nav li a {
display: block;
float: left;
padding: 5px 8px;
background: #FFC;
border: 1px solid #FF9;
border-image: initial;
}
.page_fy {
border-top: 1px solid #DDD;
padding: 5px 0;
background: lemonChiffon;
TEXT-ALIGN: center;
}
.page_fy span.off {
PADDING-RIGHT: 5px;
PADDING-LEFT: 5px;
PADDING-BOTTOM: 2px;
COLOR: #333;
MARGIN-RIGHT: 2px;
PADDING-TOP: 2px;
}
.page_fy span {
padding-left: 5px;
}
.xc_contain .pic_fl {
margin-left: 20px;
height: 30px;
line-height: 30px;
}
.xc_contain .pic_fl label {
width: 100px;
float: left;
text-align: right;
}
.xc_contain .pic_fl p {
display: block;
float: left;
margin-right: 10px;
display: inline;
}
.pic {
margin-top: 3px;
border: 1px solid #CCC;
padding: 8px;
background: white;
border-image: initial;
}
.pic p {
line-height: 25px;
line-height: 25px;
}
</style>
<base target="_self">
</head>

<body>
<!--处理上传的图片-->
<!--处理结束-->
<div class="up_qh">
	<span>选择您要添加的图片</span>
	<ul id="up_q_list">
		<li class="on">图片管理</li>
		<li>图片上传</li>
	</ul>
	<div class="clear"></div>
</div>
<div class="up_contain">

<div class="xc_contain">

<!--图片列表-->
<div class="sl_pic_thumb">
	<input type="checkbox" value="1" name="is_thumb" id="is_pic_thumb"><label for="is_pic_thumb">&nbsp;缩略图&nbsp;(勾选该选项将会优先使用缩略图)</label>
</div>
<!--图片分类-->
<div class="pic_nav" style="margin-top:10px;">
<ul>
	<?php foreach($category->result() as $value):?>
	<li><a class='' href="javascript:void(0)" onclick="get_image('<?php echo $value->category_id?>')"><?php echo $value->category_name?></a></li>
	<?php endforeach;?>
</ul>
<div class="clear"></div>
</div>
<ul class="pic_list_ct"></ul>
<div class="page page_fy" style="clear:both">
 	<ul>
		<span class="off">首页</span><span class="off">上一页</span><span class="off">下一页</span><span class="off">尾页</span><span>转到<select style="width:40px;" onchange="location.href=this.options[this.selectedIndex].value;"></select></span><span>共0条记录,当前第1/0</span>	</ul>
 </div>
<div class="ok_btn">
<input type="button" class="submit wBox_close" name="sl_pic" id="sl" value="确定">
</div>
	
</div><!--区块-->

<div class="xc_contain" style="display:none">

<form name="up" action="<?php echo site_url('admin/image/upload')?>" method="post" enctype="multipart/form-data">
<div class="pic_fl"><label>选择分类：</label>
<select name="pic_cate">
		<?php foreach($category->result() as $value):?>
        <option value="<?php echo $value->category_id?>"><?php echo $value->category_name?></option>
        <?php endforeach;?>

	
</select>&nbsp;</div>
<div class="pic_fl"><p><label>缩略图：</label><label style="width:30px; padding-top:10px;"><input type="checkbox" onclick="check_is_thumb(this);" value="1" name="thumb" style="margin:0 5px;" checked="checked"><input type="hidden" name="is_thumb" value="1" id="is_thumb"></label></p><p>&nbsp;&nbsp;宽<input name="thumb_width" id="thumb_width" value="<?php echo $thumb_width?>" style="margin:0 5px; width:30px;">px&nbsp;&nbsp;高<input name="thumb_height" id="thumb_height" style="margin:0 5px; width:30px;" value="<?php echo $thumb_height?>">px </p></div>
<div class="pic_fl"><label>&nbsp;</label><input type="hidden" name="num" value="3" id="num" style="width:30px;padding:2px 0;">&nbsp;&nbsp;&nbsp;<input type="button" id="add_num" class="go" value="新增一张图片上传"> <input type=button value='删除一张图片上传' onclick='delete_upload(this)'>(最多同时上传4张图片!允许上传的图片类型:<?php echo $image_type;?>)</div>
<div id="pic_contain">
<div class="pic">
	<p>
		<input type="file" name="image1">&nbsp;图片说明(alt)：<input type="text" name="image_alt1" style="width:100px;"> 
    </p>
</div>
</div>
<p style="margin-top:10px"><input type="submit" value="上传" name="uppic" class="submit"></p>
</form>

</div><!--图片上传-->

</div>


</body></html>